<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">产品详情</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100" v-if="detailData.approvalStatus == 1">
            <el-button
                class="btn-default width100"
                type="primary"
                @click="audit()"
                v-hasPermi="['system:productBasicInformation:uncheck']"
            >审核</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approvalStatus == 2">
            <el-button
                class="btn-audit width100"
                type="primary"
                @click="reverseAudit()"
                v-hasPermi="['system:productBasicInformation:uncheck']"
            >反审核</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approvalStatus == 0 || detailData.approvalStatus == 3">
            <el-button
                class="btn-default width100"
                type="primary"
                @click="edit()"
                v-hasPermi="['system:productBasicInformation:update']"
            >编辑</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.productStatus == 0 && detailData.approvalStatus == 2">
            <el-button
                class="btn-enable width100"
                type="primary"
                @click="enable()"
                v-hasPermi="['system:productBasicInformation:enableDisable']"
            >启用</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.productStatus == 1 && detailData.approvalStatus == 2">
            <el-button
                class="btn-delete width100"
                type="primary"
                @click="disable()"
                v-hasPermi="['system:productBasicInformation:enableDisable']"
            >禁用</el-button>
        </el-col>
        <el-col :span="10" class="status-container">
          <div class="status-item">
            <span :class="{ 'active' : detailData.approvalStatus == 0 }">草稿</span>
            <span :class="{ 'active' : detailData.approvalStatus == 1 }">待审核</span>
            <span :class="{ 'active' : detailData.approvalStatus == 2 }">已审核</span>
            <span :class="{ 'active' : detailData.approvalStatus == 3 }">拒绝</span>
          </div>
        </el-col>
      </el-row>
      <ul class="tabs mt30" style="width:440px;">
        <li @click="current = 0" :class="{ active: current === 0 }">基本信息</li>
        <li @click="current = 1" :class="{ active: current === 1 }">采购信息</li>
        <li @click="current = 2" :class="{ active: current === 2 }">销售信息</li>
        <li @click="current = 3" :class="{ active: current === 3 }">库存设置</li>
      </ul>
      <div v-show="current === 0">
        <el-row class="detail-item">
          <el-col :span="8">
              <span>产品编码：</span>{{ detailData.productCode ?  detailData.productCode : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>产品名称：</span>{{ detailData.productName ?  detailData.productName : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>简称：</span>{{ detailData.shortName ?  detailData.shortName : '暂无'}}
          </el-col>
          <el-col :span="16">
              <span>产品图片：</span>
              <div style="width:100%;">
                <template v-if="JSON.stringify(detailData.shareFiles) !== '[]'">
                  <div v-for="item in detailData.shareFiles" :key="item.id" class="item-img">
                    <img :src="item.fileUrl">
                  </div>
                </template>
                <template v-else>暂无</template>
              </div>
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>英文名称：</span>{{ detailData.enName ?  detailData.enName : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>助记码：</span>{{ detailData.mnemonicCode ?  detailData.mnemonicCode : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>成本核算：</span>{{ detailData.costAccounting ?  detailData.costAccounting : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>版本号：</span>{{ detailData.version ?  detailData.version : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>产品属性：</span>{{ detailData.productProperties == '1' ? '外购' : detailData.productProperties == '2' ? '自产' : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>价格类型：</span>{{ detailData.priceType == '0' ? '未税单价' : detailData.priceType == '1' ? '含税单价' : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>是否启用批次：</span>{{ detailData.enableBatches == 0 ?  '启用' : '禁用'}}
          </el-col>
          <el-col :span="8">
              <span>是否启用扫码：</span>{{ detailData.serialNumber == 0 ?  '启用' : '禁用'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>产品分类：</span>{{ detailData.productClassification ?  detailData.productClassification : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>品牌：</span>{{ detailData.brand ?  detailData.brand : '暂无'}}
          </el-col>
        </el-row>
        <!-- 规格 -->
        <el-row class="mt30"  v-if="detailData.productSpecificationsList && detailData.productSpecificationsList.length > 0">
          <el-col :span="24" style="border:1px solid #ddd;" v-if="detailData.isSingle == '1'">
            <div class="specification">
              <span>SKU编码</span>
              <span>销售价</span>
              <span>采购价</span>
              <span>成本价</span>
              <span>图片</span>
              <span>描述</span>
            </div>
            <div class="specification" v-for="item in detailData.productSpecificationsList" :key="item.id">
              <span>{{ item.specificationCode }}</span>
              <span>{{ item.sellingPrice }}</span>
              <span>{{ item.purchasePrice }}</span>
              <span>{{ item.costPrice }}</span>
              <span v-if="item.imgUrl"><img :src="item.imgUrl" width="50" height="50"></span>
              <span v-else></span>
              <span>{{ item.description }}</span>
            </div>
          </el-col>
          <el-col :span="24" style="border:1px solid #ddd;" v-else>
            <div class="specification">
              <span>SKU编码</span>
              <span>SKU名称</span>
              <span v-for="(item, index) in detailData.objectList" :key="index">{{ item.title }}</span>
              <!-- <span>规格1</span>
              <span>规格参数1</span>
              <span>规格2</span>
              <span>规格参数2</span> -->
              <span>销售价</span>
              <span>采购价</span>
              <span>成本价</span>
              <span>图片</span>
              <!-- <span>品牌</span> -->
              <span>是否启用批次</span>
              <span>是否启用扫码</span>
              <span>描述</span>
              <span>产品标识</span>
              <span>箱规</span>
              <span>箱码标识</span>
              <span>大码规格</span>
              <span>大码标识</span>
            </div>
            <div class="specification" v-for="item in detailData.productSpecificationsList" :key="item.id">
              <span>{{ item.specificationCode }}</span>
              <span>{{ item.specificationName }}</span>
              <!-- <span>{{ item.title1 }}</span> -->
              <span v-if="item.value1">{{ item.value1 }}</span>
              <!-- <span>{{ item.title2 }}</span> -->
              <span v-if="item.value2">{{ item.value2 }}</span>
              <span>{{ item.sellingPrice ? item.sellingPrice : '暂无' }}</span>
              <span>{{ item.purchasePrice ? item.purchasePrice : '暂无'  }}</span>
              <span>{{ item.costPrice ? item.costPrice : '暂无'  }}</span>
              <span v-if="item.imgUrl"><img :src="item.imgUrl" width="50" height="50"></span>
              <span v-else>暂无</span>
              <!-- <span>{{ item.brandId }}</span> -->
              <span>{{ item.enableBatches == '1' ? '禁用' : item.enableBatches == '0' ? '启用' : '' }}</span>
              <span>{{ item.isSerial == '1' ? '禁用' : item.isSerial == '0' ? '启用' : '' }}</span>
              <span>{{ item.description ? item.description : '暂无' }}</span>
              <span>{{ item.productIdentification }}</span>
              <span>{{ item.standardBoxGauge }}</span>
              <span>{{ item.boxCodeIdentification }}</span>
              <span>{{ item.largeSizeSpecifications }}</span>
              <span>{{ item.largeSizeIdentification }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row class="detail-item" v-else>
          <el-col :span="8">
            <span>规格：</span>暂无
          </el-col>
        </el-row>
        <!--  -->
        <el-row class="detail-item">
          <el-col :span="8">
              <span>产品注册证号：</span>{{ detailData.registrationNumber ?  detailData.registrationNumber : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>有效天数：</span>{{ detailData.validDate ?  detailData.validDate : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>可组装/拆卸：</span>{{ detailData.assembly == 0 ?  '是' : '否'}}
          </el-col>
          <el-col :span="8">
              <span>成本价：</span>{{ detailData.costPrice ?  detailData.costPrice : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>单位：</span>{{ detailData.unit ?  detailData.unit : '暂无'}}
          </el-col>
          <el-col :span="8" v-if="JSON.stringify(detailData.productSpecificationsList) == '[]'">
            <span>箱规：</span>{{ detailData.boxGauge ?  detailData.boxGauge : '暂无' }}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>审核状态：</span>
            <font v-if="detailData.approvalStatus == 0" style="color:#13C2C2">草稿</font>
            <font v-if="detailData.approvalStatus == 1" style="color:#13C2C2">待审核</font>
            <font v-if="detailData.approvalStatus == 2" style="color:#52C41A">已审核</font>
            <font v-if="detailData.approvalStatus == 3" style="color:#fd562c">拒绝</font>
          </el-col>
          <el-col :span="8">
            <span>状态：</span>
            <font v-if="detailData.productStatus == 0" style="color:#fd562c">禁用</font>
            <font v-if="detailData.productStatus == 1" style="color:#52C41A">正常</font>
          </el-col>
        </el-row>
      </div>
      <div v-show="current === 1">
        <el-row class="detail-item">
          <el-col :span="8">
              <span>采购价格：</span>{{ detailData.purchasePrice ?  detailData.purchasePrice : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>采购最高限价：</span>{{ detailData.purchasePriceMax ?  detailData.purchasePriceMax : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>采购限额数量：</span>{{ detailData.purchaseNum ?  detailData.purchaseNum : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>采购限额金额：</span>{{ detailData.purchasePriceMin ?  detailData.purchasePriceMin : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>采购提前期（天）：</span>{{ detailData.procurementLeadTime ?  detailData.procurementLeadTime : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>下单提前期（天）：</span>{{ detailData.orderLeadTime ?  detailData.orderLeadTime : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>最小起订量：</span>{{ detailData.minimumOrderQuantity ?  detailData.minimumOrderQuantity : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>最大数量限制：</span>{{ detailData.maximumOrderQuantity ?  detailData.maximumOrderQuantity : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>采购员：</span>{{ detailData.buyer ?  detailData.buyer : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>采购供应商：</span>{{ detailData.purchasingSuppliers ?  detailData.purchasingSuppliers : '暂无'}}
          </el-col>
        </el-row>
      </div>
      <div v-show="current === 2">
        <el-row class="detail-item">
          <el-col :span="8">
              <span>销售价格：</span>{{ detailData.sellingPrice ?  detailData.sellingPrice : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>配送天数：</span>{{ detailData.deliveryDays ?  detailData.deliveryDays : '暂无'}}
          </el-col>
        </el-row>
      </div>
      <div v-show="current === 3">
        <el-row class="detail-item">
          <el-col :span="8">
              <span>最大安全库存：</span>{{ detailData.maximumStock ?  detailData.maximumStock : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>最小安全库存：</span>{{ detailData.minimumStock ?  detailData.minimumStock : '暂无'}}
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 审核/反审核 -->
    <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
      <el-row>
        <el-col :span="24">
          <textarea
            class="approve-textarea"
            v-model="approveRemark"
            type="textarea"
            placeholder="请输入意见和看法"
          >
          </textarea>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="btn-success mr20 width100"
          @click="agreeApprove()"
        >同意</el-button>
        <el-button
          type="primary"
          class="btn-cancel width100"
          @click="disagreeApprove()"
        >拒绝</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detailProduct, approveProduct, enableProduct } from "@/api/system/basedata/product/product"
import { listProductList } from "@/api/system/basedata/productlist/productlist"
import { listBrand } from "@/api/system/basedata/brand/brand"
export default {
  name: "userDetail",
  data(){
    return {
      id: '',
      detailData: '',
      current: 0,
      open: false,
      approveRemark: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详情信息
    getDetailData() {
      detailProduct(this.id).then(res => {
        this.detailData = res.data
        this.getProductList()
        this.getBrand()
      })
    },
    // 获取产品分类
    getProductList(){
      listProductList().then(res => {
        let arr = res.rows.find(item =>{
          return item.id == this.detailData.productClassification
        })
        if(arr != undefined){
          this.detailData.productClassification = arr.sortName
        }
      })
    },
    // 获取品牌
    getBrand(){
      listBrand(this.addDateRange({status: 0})).then(res => {
        this.detailData.productSpecificationsList.forEach(item => {
          let arr = res.rows.find(e =>{
            return e.id == item.brandId
          })
          if(arr != undefined){
            item.brandId = arr.brandName
          }
        })
      })
    },
    // 审核
    audit(){
      this.open = true
    },
    agreeApprove(){
        approveProduct(this.id, 1, 2).then(res => {
            // console.log(res)
            if(res.code == 200){
                this.getDetailData()
                this.open = false
                this.$tab.closeOpenPage({ path: "/basedata/product/list" })
                this.$modal.msgSuccess("操作成功")
            }
        })
    },
    disagreeApprove(){
        approveProduct(this.id, 0, 3).then(res => {
            if(res.code == 200){
                this.getDetailData()
                this.open = false
                this.$modal.msgSuccess("操作成功")
            }
        })
    },
    // 反审核
    reverseAudit(){
      this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
        approveProduct(this.id, 0, 0).then(res => {
          // console.log(res)
          if(res.code == 200){
            this.getDetailData()
            this.$tab.closeOpenPage({ path: "/basedata/product/list" })
            this.$modal.msgSuccess("操作成功")
          }
        })
      }).catch(() => {})
    },
    // 编辑
    edit(){
      this.$tab.closeOpenPage({ path: "/basedata/product/edit", query:{id: this.id} })
    },
    // 启用
    enable(){
      this.$modal.confirm('是否确认启用？', '启用').then(() => {
        enableProduct(this.id, 1).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("启用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    },
    // 禁用
    disable(){
      this.$modal.confirm('是否确认禁用？', '禁用').then(() => {
        enableProduct(this.id, 0).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("禁用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>


<style scoped>
.item-img{
  float: left;
  margin:0 10px 10px 0;
  width: 145px;
  height: 145px;
  overflow: hidden;
}
/* .item-img:nth-child(4n){
  margin: 0 0 10px;
} */
.item-img img{
  width: 100%;
}
.specification{
  display: flex;
  align-items: center;
  padding: 10px 0 10px 50px;
  font-size: 14px;
  color: #222;
  border-bottom: 1px solid #dfe6ec;
}
.specification:last-child{
  border-bottom: none;
}
.specification span:first-child{
  flex: 150px 0 0;
  text-align: left;
  max-width: 150px;
}
/* .specification span:last-child{
  flex: 150px 0 0;
} */
.specification span{
  flex: 1;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  word-wrap: break-word;
}
</style>